<template>
    <div class="box bg">
        <div class="status">{{ state.info.status == '0' ? '待付款...' : state.info.status == '1' ? '已付款...' :
            state.info.status == '2' ? '待接单...' : state.info.status == '3' ? '出发中...'
                : state.info.status == '4' ? '进行中...' : state.info.status == '5' ? '已完成...' :
                    state.info.status == '6' ? '待评价...' : state.info.status == '-1' ? '待退款...'
                        : state.info.status == '-2' ? '已退款...' : state.info.status == '-3' ? '已取消...' : '' }}</div>
        <nut-steps :current="state.current" @click-step="onClickStep">
            <nut-step title="等待接单">1</nut-step>
            <nut-step title="服务接单">2</nut-step>
            <nut-step title="已经到达">3</nut-step>
            <nut-step title="开始服务">4</nut-step>
            <nut-step title="服务完成">5</nut-step>
        </nut-steps>
    </div>
    <div class="box">
        <div class="flex-a addr-box">
            <!-- <div class="address">江西省上饶市广信区万达广场B座</div>
            <nut-button plain type="info" size="mini">导航</nut-button> -->
            <div class="img">
                <img :src="state.info ? state.info.sysUser.headerImg : ''" alt="">
            </div>
            <div class="address">
                <div class="flex-a flex-b">
                    <div class="flex-a"><span>{{ state.info ? state.info.sysUser.nickName : ''
                            }}</span>
                        <div class="flex-a"><span>{{ state.info ? state.info.sysUser.userName : '' }}</span><img
                                src="https://cxj.szzkba.cn/upload/i/2024/07/19/155613.png"
                                @click="callPhone(state.info.sysUser.userName)" /></div>
                    </div>
                    <nut-button plain type="info" size="mini">导航</nut-button>
                </div>
                <div> {{
                    state.info ? state.info.service_Addr : '' }} </div>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="title">服务项目</div>
        <div class="pro flex">
            <div class="left">
                <img :src="state.info ? state.info.pageSetting.remark : ''" alt="">
            </div>
            <div class="middle">
                <div class="flex-a flex-b name">
                    <span>{{ state.info ? state.info.pageSetting.project_Name : '' }}</span>
                    <span>x{{ state.info ? state.info.count : '' }}</span>
                </div>
                <div class="time">服务时长：60分钟</div>
            </div>
        </div>
        <div class="money flex-a flex-b">
            <div>服务金额</div>
            <div>￥{{ state.info ? state.info.service_Amount : '0' }}</div>
        </div>
        <div class="item flex-a flex-b">
            <div>下单客户</div>
            <div>{{ state.info ? state.info.sysUser.nickName : '无' }}</div>
        </div>
        <div class="item flex-a flex-b">
            <div>预约时间</div>
            <div>{{ state.info ? state.info.service_Time : '无' }}</div>
        </div>
        <div class="item flex-a flex-b">
            <div>订单备注</div>
            <div>{{ state.info ? state.info.remark : '无' }}</div>
        </div>
        <div class="item flex-a flex-b">
            <div>订单编号</div>
            <div>{{ state.info ? state.info.order_No : '无' }}</div>
        </div>
        <div class="item flex-a flex-b">
            <div>下单时间</div>
            <div>{{ state.info ? state.info.CreatedAt : '无' }}</div>
        </div>
        <!-- <div class="item flex-a flex-b">
            <div>付款时间</div>
            <div>2023-12-21 12：00：00</div>
        </div> -->
    </div>
    <div style="background: #ffffff;border-radius:5%;margin-top:5%;">
        <div class="flex-a flex-b btns">
            <nut-button color="#496AF2" @click="receOrder" v-if="state.info.status == 1">接单</nut-button>
            <nut-button color="#496AF2" plain @click="resetOrder" v-if="state.info.status == 1">拒绝接单</nut-button>
            <nut-button color="#21C38F" size="small" @click.stop="sureArrive"
                v-if="state.info.status == 4">完成订单</nut-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { getFindOrders, changeOrder } from '../../../../api/index'
import { BASE_URL } from './../../../../utils/index'
import Taro, { useRouter } from '@tarojs/taro';
const state = reactive({
    current: 1,
    id: '',
    info: {
        sysUser: {},
        pageSetting: {}
    },
    uploadUrl: BASE_URL + '/fileUploadAndDownload/uploadPublic',
})
onMounted(() => {
    // Taro.getStorage({
    //     key: 'user',
    //     success: function (res) {

    //     }
    // })
    const router = useRouter();
    if (router.params.id) {
        state.id = router.params.id
        getDetail(router.params.id)
    }
})
// const jumpTo = (path) => {
//     Taro.navigateTo({ url: path })
// }
const onClickStep = () => { }
const getDetail = (id) => {
    getFindOrders({ ID: id }).then(res => {
        if (res.code == 0) {
            state.info = res.data.reorders
            console.log(state.info)
            state.current = state.info.status
            if (state.current > 2) {
                state.current = state.current - 1
            }
            state.info.CreatedAt = reTime(state.info.CreatedAt)
            state.info.sysUser.userName = state.info.sysUser.userName.substr(0, 3) + "****" + state.info.sysUser.userName.substr(7);
        }
    })
}
const addZero = (n) => {
    return n < 10 ? '0' + n : n
}
const reTime = (t) => {
    let time = new Date(t)
    let y = time.getFullYear()
    let m = addZero(time.getMonth() + 1)
    let d = addZero(time.getDate())
    let h = addZero(time.getHours())
    let f = addZero(time.getMinutes())
    let s = addZero(time.getSeconds())
    return y + '-' + m + '-' + d + ' ' + h + ':' + f + ':' + s
}
const callPhone = (num) => {
    Taro.makePhoneCall({
        phoneNumber: num
    })
}
const receOrder = () => {
    Taro.getLocation({
        type: 'gcj02',
        success: function (res) {
            const latitude = res.latitude
            const longitude = res.longitude
            const earthRadius = 6371000;
            const lat1Rad = latitude * (Math.PI / 180);
            const lat2Rad = Number(state.info.service_Lat) * (Math.PI / 180);
            const lon1Rad = longitude * (Math.PI / 180);
            const lon2Rad = Number(state.info.service_Lng) * (Math.PI / 180);
            const diffLat = lat2Rad - lat1Rad;
            const diffLon = lon2Rad - lon1Rad;
            const a = Math.sin(diffLat / 2) * Math.sin(diffLat / 2) +
                Math.cos(lat1Rad) * Math.cos(lat2Rad) *
                Math.sin(diffLon / 2) * Math.sin(diffLon / 2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            const distance = earthRadius * c;
            if (distance < 100) {
                changeOrder({ order_No: state.info.order_No, status: 3 }).then(res => {
                    if (res.code == 0) {
                        getDetail(state.id)
                    }
                })
            } else {
                Taro.showToast({
                    title: '未到达指定地点',
                    icon: 'error',
                    duration: 2000
                })
            }
        }
    })
}
const resetOrder = () => {
    changeOrder({ order_No: state.info.order_No, status: -3 }).then(res => {
        if (res.code == 0) {
            getDetail(state.id)
        }
    })
}
const sureArrive = () => {
    Taro.showModal({
        title: '提示',
        content: '确认上传照片？',
        success: function (res) {
            if (res.confirm) {
                Taro.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success: function (res) {
                        var tempFilePaths = res.tempFilePaths
                        Taro.uploadFile({
                            url: state.uploadUrl,
                            filePath: tempFilePaths[0],
                            name: 'file',
                            success(res) {
                                const data = res.data
                                if (JSON.parse(data).code == 0) {
                                    console.log(JSON.parse(data))
                                    let url = JSON.parse(data).data.file.url
                                    changeOrder({ order_No: state.info.order_No, picture: url, status: 5 }).then(res => {
                                        if (res.code == 0) {
                                            Taro.showToast({
                                                title: '已完成',
                                                icon: 'success',
                                                duration: 2000
                                            })
                                        }
                                    })
                                }
                            }
                        })
                    }
                })
            }
        }
    })
}
</script>
<style lang="scss">
.nut-step-process {
    .nut-step-icon {
        background: #496AF2 !important;
    }

    .nut-step-title {
        font-weight: bold;
        color: #909CA4 !important;
    }
}

.box {
    width: 92%;
    margin-left: 4%;
    margin-top: 3%;
    background: #ffff;
    border-radius: 5%;
    padding: 30rpx 40rpx 20rpx;
    box-sizing: border-box;

    .addr-box {
        .img {
            img {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                margin-right: 20rpx;
            }
        }

        .address {
            width: 80%;

            img {
                width: 40rpx;
                height: 40rpx;
            }

            div {
                white-space: nowrap;
            }

            div:first-child {
                margin-bottom: 10rpx;

                span:first-child {
                    font-weight: bold;
                    font-size: 30rpx;
                    margin-right: 20rpx;
                }

                span:last-child {
                    font-size: 26rpx;
                    font-weight: bold;
                }
            }

            div:last-child {
                font-size: 26rpx;
                white-space: nowrap;
            }
        }
    }

    .status {
        border-radius: 50rpx;
        background: #fff;
        font-size: 30rpx;
        color: #21C38F;
        padding: 10rpx 40rpx;
        box-sizing: border-box;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    .address {
        font-size: 30rpx;
        color: #666;
        width: 60%;
    }

    .title {
        font-size: 30rpx;
        font-weight: bold;
        border-bottom: 1px solid #F9F9F9;
    }

    .pro {
        margin-top: 20rpx;

        img {
            width: 200rpx;
            height: 200rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }

        .middle {
            width: 65%;

            .name {
                font-size: 30rpx;
                font-weight: bold;

                span:last-child {
                    color: #666;
                    font-size: 24rpx;
                    font-weight: normal;
                }
            }

            .time {
                color: #666;
                font-size: 26rpx;
            }
        }
    }

    .money {
        border-bottom: 1px solid #F9F9F9;
        font-size: 28rpx;
        padding: 20rpx 0 10rpx 0;
        margin-bottom: 20rpx;
    }

    .item {
        font-size: 26rpx;
        margin-bottom: 10rpx;

        div:last-child {
            color: #666;
        }
    }

}

.btns {
    padding: 20rpx 40rpx;

    .nut-button {
        width: 48%;
    }
}

.box.bg {
    background: #D3F2E8;
}
</style>